<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">上传凭证</block>
		</cu-custom>
		<view class="bg-white margin radius overflow">
			<view class="cu-bar text-bold margin-lr solid-bottom">官方收款信息</view>
			<view class="margin-lr margin-tb-sm">户名：<text>{{receivables?receivables.receivables_name:''}}</text></view>
			<view class="margin-lr margin-tb-sm">账户：<text>{{receivables?receivables.receivables_bank_cark:''}}</text></view>
			<view class="margin-lr margin-tb-sm">开户行：<text>{{receivables?receivables.receivables_bank_name:''}}</text></view>
			<view class="margin-lr margin-top-sm margin-bottom text-center">
				<image :src="receivables?receivables.receivables_qrcode:''" mode="widthFix" class="qrcode"></image>
			</view>
		</view>
		<view class="bg-white margin-lr margin-top radius overflow">
			<view class="cu-form-group" v-if="amount">
				<view class="content">订单金额</view>
				<view class="action text-red text-price">{{amount}}</view>
			</view>
			<view class="cu-form-group ">
				<view class="w100">
					<textarea style="height: 120rpx;" maxlength="-1" placeholder="请输入备注" v-model="formData.content"></textarea>
				</view>
			</view>
			<ImageUploadView ref="ImageUploadView"></ImageUploadView>
		</view>

		<view class="padding-lg">
			<view class=" flex flex-direction">
				<button class="cu-btn lg round" :class="'bg-'+theme" @tap="onSubmit">提交</button>
			</view>
		</view>
		<view class="padding text-center">
			<view class="text-gray text-xs">
				<text class="text-red text-xs">*</text>
				<text class="text-gray text-xs">上传需要2-3个工作日审核 请耐心等候</text>
			</view>
			<view class="text-gray text-xs margin-top-sm">
				<text class="text-red text-xs">*</text>
				<text class="text-gray text-xs">上传小于2M图片</text>
			</view>
		</view>


	</view>
</template>

<script>
	import ImageUploadView from '@/components/default/ImageUploadView.vue'
	export default {
		components: {
			ImageUploadView
		},
		data() {
			return {
				amount: 0,
				receivables: null,
				formData: {
					id: 0,
					content: '',
				},
				loading: false,
				theme: this.$config.THEME(),
			};
		},
		onLoad(options) {
			this.formData.id = options.id
			if (!this.formData.id) {
				this.$common.showErrorModal('参数有误')
				return
			}
			if (options.money)
				this.amount = parseFloat(options.money)

			this.receivables = this.$common.getCache('receivables')
			console.log(this.receivables)
		},
		methods: {
			onSubmit() {
				if (this.loading) return
				this.loading = true
				this.$refs.ImageUploadView.getUploadList().then((res) => {
					this.formData.covers = res

					this.$http.post('pay', {
							id: this.formData.id,
							pay_type: 8,
							order_group: 'order',
							data: JSON.stringify(this.formData)
						})
						.then((response) => {
							console.log(response)
							this.$common.setCache('order_change', true)
							this.$common.showSuccess('上传成功', (r) => {
								uni.redirectTo({
									url: '/pages/shop/order/detail?id=' + this.formData.id
								})
							})
							this.loading = false
						})
						.catch((response) => {
							this.loading = false
							uni.hideLoading()
						})
				})

			},
			replaceInput: function(event) {
				var value = event.target.value
				var r = /^[+-]?[1-9]?[0-9]*\.[0-9]*$/
				if (r.test(value)) {
					this.$common.showError('请输入整数的金额')
					this.money = parseInt(value)
				}
			},
		}
	}
</script>

<style>
	.qrcode {
		width: 50%;
	}
</style>
